<!--时间段管理-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :permission="permissionList"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @row-del="handleDel">
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="addHandle()">新增
          </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
              class="filter-item"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="editHandle(scope.row)">编辑
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDel(scope.row)">删除
          </el-button>
        </template>
        <template slot="status" slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">正常</el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">停用</el-tag>
        </template>
        <template slot="timerange" slot-scope="scope">
          {{ scope.row.timeFrameStart.substr(0,5) }}-{{ scope.row.timeFrameEnd.substr(0,5) }}
        </template>
      </avue-crud>
      <!--新增弹窗-->
      <el-dialog
          :visible.sync="dialogFormVisible"
          center
          title="新增"
          :close-on-click-modal="false"
          width="35%" @close="dictItemVisible">
        <el-form v-model="addform" :rules="rules" style="padding-left: 20px">
          <el-form-item label="时间段名称" prop="timeName">
            <el-input v-model="addform.timeName" placeholder="请输入时间段名称" style="width: 65%"></el-input>
          </el-form-item>
          <el-form-item label="时间范围" prop="addtimeRange" style="width: 93%">
            <el-time-picker
                v-model="addtimeRange"
                end-placeholder="结束时间"
                format="HH:mm"
                is-range
                placeholder="选择时间范围"
                range-separator="-"
                start-placeholder="开始时间"
                value-format="HH:mm:ss"
                style="width: 70%;margin-left: 14px">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="时间状态" prop="status">
            <el-radio v-model="addform.status" :value="0" label="0" style="margin-left: 16px">正常</el-radio>
            <el-radio v-model="addform.status" :value="1" label="1">停用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button
              class="filter-item"
              size="small"
              @click="dictItemVisible()">取消
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="handleSave()">确定
          </el-button>
        </div>
      </el-dialog>
      <!--编辑弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          center
          title="编辑"
          :close-on-click-modal="false"
          width="35%" @close="dictEditVisible">
        <el-form v-model="editform" style="padding-left: 20px">
          <el-form-item label="时间段名称" prop="timeName">
            <el-input v-model="editform.timeName" placeholder="请输入时间段名称" style="width: 65%"></el-input>
          </el-form-item>
          <el-form-item label="时间范围" prop="edittimeRange" style="width: 93%">
            <el-time-picker
                v-model="edittimeRange"
                end-placeholder="结束时间"
                is-range
                placeholder="选择时间范围"
                range-separator="-"
                start-placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm:ss"
                style="width: 70%;margin-left: 14px">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="时间状态" prop="status">
            <el-radio v-model="editform.status" :label="0" :value="0" style="margin-left: 16px">正常</el-radio>
            <el-radio v-model="editform.status" :label="1" :value="1">停用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button
              class="filter-item"
              size="small"
              @click="dictEditVisible()">取消
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="handleUpdate()">确定
          </el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {AddtimeFrame, beforeEditObj, DeltimeFrame, EdittimeFrame, getFrameCount, timeFrame} from '@/api/pass/timeframe'
import {mapGetters} from 'vuex'

export default {
  name: 'time-frame',
  data() {
    return {
      addtimeRange: '',
      edittimeRange: '',
      dialogFormVisible: false,
      dialogEditVisible: false,
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      addform: {
        timeName: '',
        status: '0'
      },
      editform: {
        timeName: '',
        id: '',
        status: ''
      },
      rules: {  //必填项（验证规则）
        status: [
          {required: true, trigger: "none"}
        ],
        timeName: [
          {required: true, trigger: "none"}
        ],
        addtimeRange: [
          {required: true, trigger: "none"}
        ],
        edittimeRange: [
          {required: true, trigger: "none"}
        ],
      },
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        menuWidth: 210,
        menuType: 'button',
        align: 'center',
        emptyBtnText: '重置', //清空按钮文案
        refreshBtn: true,
        showClomnuBtn: false,
        searchSize: 'mini',
        searchMenuSpan: 6,
        searchLabelWidth: 72,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        excelBtn: false,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间段id',
            prop: 'id',
            hide: true
          },
          {
            label: '时间段名',
            prop: 'timeName',
            type: 'input',
            search: true,
          }, {
            label: '开始时间',
            prop: 'timeFrameStart',
            hide: true
          },
          {
            label: '结束时间',
            prop: 'timeFrameEnd',
            hide: true
          },
          {
            label: '时间范围',
            prop: 'timerange',
            slot: true
          },
          {
            label: '修改时间',
            prop: 'updateTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
          }, {
            label: '修改人',
            prop: 'operator',
          }, {
            label: '时间状态',
            prop: 'status',
            slot: true,
          },

        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_time_del, true),
      }
    }
  },
  methods: {
    //新增弹窗相关
    addHandle() {
      this.dialogFormVisible = true
    },

    //点击新增的关闭
    dictItemVisible: function () {
      this.dialogFormVisible = false
      this.addform.timeName = null
      this.addtimeRange = ''
    },

    //点击编辑的关闭
    dictEditVisible: function () {
      this.dialogEditVisible = false
      this.editform = {}
      this.edittimeRange = ''
    },

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      timeFrame(Object.assign({
        descs: 'create_time',  //是否倒序
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //新增的提交
    handleSave: function (row, done) {
      if (this.addform.timeName === '') {
        this.$message.error('添加失败，请输入时间段名称')
        return
      }
      if (this.addtimeRange === null) {
        this.$message.error('添加失败，请输入时间范围')
        return
      }
      this.addform.timeFrameStart = this.addtimeRange[0]
      this.addform.timeFrameEnd = this.addtimeRange[1]
      AddtimeFrame(this.addform).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
        this.addform.timeName = null
        this.addtimeRange = ''
        this.getList(this.page)
      })
    },

    //编辑
    editHandle(row) {
      this.dialogEditVisible = true
      beforeEditObj(row.id).then(res => {
        if (res.data.code === 0) {
          this.editform = res.data.data
        }
      })
      let timearr = []
      timearr.push(row.timeFrameStart, row.timeFrameEnd)
      this.edittimeRange = timearr
      console.log(this.edittimeRange)
    },

    //编辑的提交
    handleUpdate: function (row, index, done) {
      if (this.editform.timeName === '') {
        this.$message.error('修改失败，请输入时间段名称')
        return
      }
      if (this.edittimeRange === null) {
        this.$message.error('修改失败，请输入时间范围')
        return
      }
      this.editform.timeFrameStart = this.edittimeRange[0]
      this.editform.timeFrameEnd = this.edittimeRange[1]
      console.log(this.editform)
      EdittimeFrame(this.editform).then(res => {
        if (res.data.code === 0) {
          this.dialogEditVisible = false
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
        this.editform = {}
        this.edittimeRange = ''
        this.getList(this.page)
      })
    },

    //删除
    handleDel: function (row) {
      getFrameCount(row.id).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.length === 0) {
            this.$confirm('是否确认删除"' + row.timeName + '"的时间段?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              closeOnClickModal:false,
            }).then(function () {
              return DeltimeFrame(row.id)
            }).then(() => {
              this.getList(this.page)
              this.$message.success('删除成功')
            })
          } else {
            this.$confirm('该时间段已被绑定，是否确认删除"' + row.timeName + '"的时间段?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              closeOnClickModal:false,
            }).then(function () {
              return DeltimeFrame(row.id)
            }).then(() => {
              this.getList(this.page)
              this.$message.success('删除成功')
            })
          }
        }
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },

    //清空时重置页面
    searchReset() {
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 4px !important;
  margin-right: 36px;
}
</style>